<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间案例</title>
    <style>
        .box {
            margin: 0 auto;
            width: 600px;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                url(https://gips0.baidu.com/it/u=567037999,4238421755&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f1184_845) no-repeat center;
            border-radius: 10%;
        }

        h1 {
            text-align: center;
            font-size: 80px;
            color: rgb(238, 230, 230);
        }
    </style>
</head>

<body>
    <div class="box">
        <h1 id="time">10:55:20</h1>
    </div>

    <script>
        //封装函数补零操作
        function fillZero(numbers) {
            numbers = parseInt(numbers);
            return numbers < 10 ? '0' + numbers : numbers   //numbers小于2位数，补0，符合不补0
        }

        //获取星期
        function getWeekday(dayStr) {
            const options = { weekday: 'long' };
            const day = new Date(dayStr);
            const formatter = new Intl.DateTimeFormat('zh-CN', options);
            const weekday = formatter.format(day);
            return weekday;
        }

        //获取id使用函数
        let h1Ele = document.getElementById('time');
        // setInterval:计时器
        setInterval(function () {
            const date = new Date();
            let years = date.getFullYear();
            let months = date.getMonth() + 1;
            let dates = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            let day = date.getDay();
            let timeStr = `${fillZero(years)}/${fillZero(months)}/${fillZero(dates)} 
                           ${fillZero(hours)} :${fillZero(minutes)} :${fillZero(seconds)} 
                           ${getWeekday(day)}`;
            // 将此字符串显示在h1标签中
            h1Ele.innerText = timeStr;
        }, 1000);


    </script>
</body>

</html>